<!-- 下拉菜单 -->
<template>
	<view class="v-select" id="v-select-more">
		<view :class="['v-select-item',{'v-select-item-selected':data.checked,'v-select-item-isvalue':data.isvalue}]" @click="selectItem">
			<text>{{value.name}}</text>
			<icon class="iconfont icon">&#xe77e;</icon>
		</view>
	</view>
	<!-- 服务分类 -->
	<uni-popup ref="popup" type="right" @change="popupChange" :popupTop="data.popupTop">
		<view class="content">
			<view class="hd">
				<text>筛选条件</text>
			</view>
			<view class="bd">
				<view :class="['item',{'item-selected':item.selected}]" v-for="(item,index) in list" :key="index" @click.stop="change(item)">
					<text>{{item.name}}</text>
				</view>
			</view>
			<view class="ft">
				<button type="default" class="btn" hover-class="btnClickStyle" @click.stop="reset()">重置</button>
				<button type="default" class="btn btn-confirm" hover-class="btnClickStyle" @click.stop="confirm()">确定</button>
			</view>
		</view>
	</uni-popup>
</template>
<script setup>
	import { ref, reactive, computed, watch, getCurrentInstance } from 'vue';
	const _this = getCurrentInstance();
	const emits = defineEmits(['callback']);
	const popup = ref(null);
	const popupTop = ref(`${getApp().globalData.navHeight+uni.upx2px(100+98)}px`);
	const props_data = defineProps({
		type: {
			type: String
		},
		value: {
			type: Object
		},
		list: {
			type: Array
		}
	});
	watch(() => props_data.value, (newVal) => {
		data.isvalue = ['all', 'default', 0].indexOf(newVal.value) < 0;
	});
	const data = reactive({
		checked: false,
		value: props_data.list[0].value,
		popupTop: 0,
		isvalue: false
	});
	async function selectItem() {
		const res = await selectorQuery();
		data.popupTop = popupTop.value = `${res.top-uni.upx2px(10)}px`;
		if (!data.checked) popup.value.open();
		else popup.value.close();
		uni.$once('pageScroll', () => {
			if (popup.value) popup.value.close();
		})
	}
	// 获取节点参数
	function selectorQuery() {
		return new Promise((resolve, reject) => {
			const query = uni.createSelectorQuery().in(_this);
			query.select('#v-select-more').boundingClientRect(res => {
				resolve({
					height: res.height,
					top: res.top
				});
			}).exec();
		})
	}
	// 选中某项
	function change(item) {
		item.selected = !item.selected;
	}

	function reset() {
		props_data.list.forEach(item => {
			item.selected = false;
		})
		emits('callback', props_data.list);
		popup.value.close();
	}

	function confirm() {
		emits('callback', props_data.list);
		popup.value.close();
	}

	function popupChange(e) {
		data.checked = e.show;
		if (e.show) {
			uni.$emit('openPopup', `SELECT_${props_data.type}`);
			uni.$once('openPopup', (res) => {
				if (res != `SELECT_${props_data.type}` && popup.value) popup.value.close();
			})
		}
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	.v-select {
		position: relative;
		z-index: 99999;
		height: 80rpx;
		background-color: #F3F5F7;
	}
	.v-select-item {
		@include flex(row, center);
		height: 80rpx;
		text {
			font-size: 28rpx;
			color: #666;
		}
		.icon {
			margin-left: 6rpx;
			font-size: 28rpx;
			color: #aaa;
		}
		&-selected {
			text {
				color: $color;
			}
			.icon {
				transform: rotate(180deg);
				color: $color;
			}
		}
		&-isvalue {
			text, .icon {
				color: $color;
			}
		}
	}
	.content {
		@include flex(column);
		align-items: flex-start;
		width: 600rpx;
		height: calc(100vh - v-bind(popupTop));
		background-color: #fff;
		.hd {
			height: 100rpx;
			line-height: 100rpx;
			padding: 0 34rpx;
			font-size: 32rpx;
			color: #000;
		}
		.bd {
			flex: 1;
			width: 100%;
			padding: 0 34rpx;
			.item {
				display: inline-block;
				height: 70rpx;
				line-height: 70rpx;
				margin: 0 24rpx 24rpx 0;
				padding: 0 30rpx;
				background: #F1F1F1;
				border: 1px solid #F1F1F1;
				border-radius: 8rpx;
				text-align: center;
				font-size: 28rpx;
				color: #666;
				&-selected {
					background-color: rgba(225, 131, 91, .10);
					border-color: $color;
					color: $color;
				}
			}
		}
		.ft {
			@include flex;
			width: 100%;
			height: 90rpx;
			.btn {
				flex-basis: 50%;
				height: 90rpx;
				line-height: 90rpx;
				border-radius: 0;
				font-size: 32rpx;
				color: #666;
				&-confirm {
					background: $color;
					color: #fff;
				}
			}
		}
	}
</style>
